<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>相册管理</title>
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
<link href="../../js/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../js/easyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="../../js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script>
	$("#addPhotoButton").linkbutton( {});
	$("#setTransverseCoverButton").linkbutton( {});
	$("#setLognitudinalCoverButton").linkbutton( {});
	$("#delPhotoButton").linkbutton( {});

	function back(){
		window.location.href = "gallery_index.action";
	}
	
	function addPhoto(){
		var inti = $("#uploadInit").val(); 
		if(inti =="0"){
			var html=$("#photoDialog").html();
			$("#photoDialog").show();
	        $("#photoDialog").dialog({        
	            modal: true
	                   });
	         $("#photoDialog").empty().append($(html));
	         $("#uploadify").uploadify(
	                 {
	                     'uploader' : '../../js/uploadify/uploadify.swf',
	                     'script' : 'add_photo.action',
	                     'scriptData' : {
	                         'album.id' : $('#albumId').val(),
	                         'autoZoomPhoto' : $('#autoZoomPhoto').attr("checked")
	                     },
	                     'cancelImg' : '../../js/uploadify/cancel.png',
	                     'folder' : '../../gallery/',
	                     'fileDataName' : 'uploadify',
	                     'auto' : true,
	                     'onComplete' : function(event, ID, fileObj,
	                             response, data) {
	                         var dataObj = eval("(" + response + ")");
	                         $("#dateList").html("");
	                         for(var i=0;i<dataObj.length;i++){   
	                        	 var id = dataObj[i].id;
		                         var name = dataObj[i].name;
		                         var albumId = dataObj[i].album.id;	                         
		                         $("#dateList").prepend(
		                                 "<li class='photoRecord_"
		                                         + id
		                                         + "'>../../gallery/"
		                                         + albumId + "/mini/" + name
		                                         + "</li>");
	                         }
	                         displayPhoto();
	                     }
	                 });  
	         $("#uploadInit").val("1");
		} else{
			$("#photoDialog").dialog('open');
		}
	}
	$(function() {	
		 displayPhoto();
	});
	
	function delPhoto() {
		var photoId = $("#photoId").val();
		$("#deletePhotoForm").form('load', {
            'photo.id' : photoId
        });
		
		$.messager.confirm('确认','确认要删除吗?',function(fn){   
	        if (fn){            
	            $("#deletePhotoForm").form('submit', {
	                url: "delete_photo.action",
	                success:function(data) {
	                    $(".photoRecord_" + photoId).remove();
	                    displayPhoto();
	                }
	            });
	               
	        }   
	    }); 
	}

	function setTransverseCover() {
		$("#coverForm").form('load',{
			'coverType':'TRANSVERSE_COVER'
			}
				);
		$('#coverDialog').show();
		$("#coverDialog").dialog({
			modal:true
			});
		
	}

	function setLognitudinalCover() {
		$("#coverForm").form('load',{
			'coverType':'LOGNITUDINAL_COVER'
			}
				);
		$('#coverDialog').show();
		$("#coverDialog").dialog({
			modal:true
			});
    }

	function displayPhoto(){
		var body = "<table><tr>";
	    for(var i=1; i <= $("ul li").size(); i++){
	        
	        var el = $("ul li:nth-child(" + i + ")");//       '"+'#dateList li:nth-child('+ i +')'+"'";
	        var clazz = $(el).attr("class");
	        var id = clazz.substring(12);
	        //alert(id);
	        body = body + "<td width='225' height='225' class='photoDiv' id='" + id +"' align='center' valign='middle'>";
	        body = body + "<img src='" + $(el).html() + "'></img>";
	        body = body + "</td>";
	        if(i%4 == 0)
		        body = body + "</tr><tr>";

		}
	    body = body + "</tr></table>";	
	    $('#displayList').html(body);
	    $(".photoDiv").mousedown(function() {
            $(".photoDiv").attr("bgcolor","#FFFFFF");
            $(this).attr("bgcolor","#FFFFCC");
              
            $("#photoForm").form('load', {
                'photoId' : this.id
            }); 
        });
	}

	function closeCoverForm() {
	    $('#coverDialog').dialog('close');
	}

	function submitCoverForm(){
		photoId = $("#photoId").val();
		$("#coverForm").form('load', {
            'photo.id' : photoId
        });
		
		$("#coverForm").form('submit', {
			url: "set_cover.action",
            success:function(data) {
                var coverType =$("#coverType").val();
                if(coverType == "TRANSVERSE_COVER"){
                    $("#tcover").html("<a href='cover_index.action?album.Id=" + $("#albumId").val() + "&coverType=TRANSVERSE_COVER'>" + ($("#" + photoId).html()) + "</a>");
                }else
                	$("#lcover").html("<a href='cover_index.action?album.Id=" + $("#albumId").val() + "&coverType=LOGNITUDINAL_COVER'>" + ($("#" + photoId).html()) + "</a>");
            }
        }); 
		closeCoverForm();
	}
</script>
</head>
<body>

<table>
	<tr>
		<td width="150">相册名字:</td>
		<td><s:property value="album.title" /></td>
	</tr>
	<tr>
		<td width="150">相册描述:</td>
		<td><s:property value="album.description" /></td>
	</tr>
</table>
<table>
	<tr>
		<td width="150">横向封面:</td>
		<td><div id="tcover"><a
				href="cover_index.action?album.id=<s:property value ="album.id"/>&coverType=TRANSVERSE_COVER"><img
				src="../../gallery/<s:property value ="album.id"/>/cover/transverse/mini/<s:property value ="album.cover"/>" /></a>
			</div>
		</td>
		<td width="150">纵向封面:</td>
		<td><div id="lcover"><a
				href="cover_index.action?album.Id=<s:property value ="album.id"/>&coverType=LOGNITUDINAL_COVER"><img
				src="../../gallery/<s:property value ="album.id"/>/cover/lognitudinal/mini/<s:property value ="album.cover"/>" /></a>
			</div></td>
	</tr>
</table>

<table>
	<tr>
		<td>相片列表:</td>
		<td><a href="#" onclick="addPhoto()" id="addPhotoButton"
			class="easyui-linkbutton" plain="true" iconCls="icon-add">添加照片</a>
			<a href="#" onclick="setTransverseCover()" id="setTrasverseCoverButton"
				class="easyui-linkbutton" plain="true" iconCls="icon-edit">设为横向封面</a>
			<a href="#" onclick="setLognitudinalCover()" id="setLognitudinalCoverButton"
				class="easyui-linkbutton" plain="true" iconCls="icon-edit">设为纵向封面</a>
			<a href="#" onclick="delPhoto()" id="delPhotoButton"
				class="easyui-linkbutton" plain="true" iconCls="icon-remove">删除照片</a>
		</td>
	</tr>
</table>



<div id="photoDialog" icon="icon-save" title="相册管理"
	style="height: auto; width: 400; display: none; padding: 5px;">
	<form>
		<input id="uploadify" name="uploadify" type="file" /> 
		<input type="hidden" id="albumId" name="albumId" value='<s:property value="album.id" />' />
		<input type="hidden" id="uploadInit" name="uploadInit" value="0"></input>
		<input type="checkbox" id="autoZoomPhoto" name="autoZoomPhoto" value="true"/>自动生成缩图
	</form>
</div>

<div id="coverDialog" icon="icon-save" title="封面管理"
	style="height: auto; width: auto; display: none; padding: 5px;">
	<form method="post" id="coverForm" name="coverForm">
		<input type="checkbox" name="autoZoomCover" value="true" checked/>自动生成缩图 
		<input type="hidden" id="photo.id" name="photo.id" />
		<input type="hidden" id="coverType" name="coverType" />
	</form>
	<div class="toolbar" style="padding: 10px;">
		<a href="#" id="coverButton" onclick="submitCoverForm()" class="easyui-linkbutton" iconCls="icon-ok">确定</a> 
		<a href="#" onclick="closeCoverForm()" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
	</div>
</div>

<br></br>

<div >
<ul id="dateList" style="display:none">
	<s:iterator value="album.photoList" var="photo" status="index">
		<li class="photoRecord_<s:property value ="id"/>">../../gallery/<s:property
			value="album.id" />/mini/<s:property value="name" /></li>
	</s:iterator>
</ul>
</div>

<div id="displayList" ></div>
<div style="width:900px;text-align:center">
<a class="easyui-linkbutton" onClick="back()">确定</a>
</div>


<form method="post" id="deletePhotoForm" name="deletePhotoForm">
	<input type="hidden" id="photo.id" name="photo.id" />
</form>
<form method="post" id="photoForm" >
	<input type="hidden" id="photoId" name="photoId" />
</form>
</body>
</html>